import {Card, Tag} from "antd";
import React, {useEffect, useState} from "react";

const ProductPreview = (pro) => {

    const product =pro.product;

    useEffect(()=>{
    },[]);

return(
    <>
            <div  style={{
            height: '320px',
            width: '240px',
            textAlign: 'center',
            verticalAlign: 'middle',
            display: 'table-cell',
            overflow: 'hidden',
            backgroundColor: '#f5f5f5',
                float:"left"

        }}>
            <a href={`/detail?id=${product.stockId}`}>
                <img src={`./profile/${product.picturePath}`} style={{ margin: '0px auto', position: 'relative', maxWidth: '210px', maxHeight: '210px', display: 'inline' }} alt={product.stockName} />
                <div style={{
                    backgroundColor: 'rgba(0, 0, 0, 0)',
                    textAlign: 'center',
                    verticalAlign: 'middle',
                    display: 'table-cell'
                }}>

                        <a style={{
                            fontFamily: "Microsoft YaHei",
                            display: "block",
                            textAlign: "center",
                            fontSize: "18px",
                            color: "#000000",
                            fontWeight: "normal",
                            textDecoration: "none",
                            marginTop: '20px',
                            whiteSpace: "nowrap",
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                            width: '240px'
                        }}>
                            {product.stockName}
                        </a>
                        <p style={{
                            whiteSpace: "nowrap",
                            overflow: "hidden",
                            textOverflow: "ellipsis",
                            width: '240px'
                        }}>
                            {product.stockDetail}</p>
                        <span style={{
                            display: 'inline',
                            fontFamily: 'Microsoft YaHei',
                            fontSize: '16x',
                            color: '#ff0000',
                            fontWeight: 'bold',
                            textDecoration: 'none'
                        }}>价格：{(product.stockPrice).toFixed(2)}/斤</span>

                </div>
            </a>
        </div>
    </>
)
}
export default ProductPreview;